<template>
  <a-modal :visible="showModal" ok-text="保存" @ok="onSaveModal()" @cancel="close()">
    <template #title> 新建表单 </template>
    <div>
      <a-form :model="modal" :rules="rules" ref="modalFormRef">
        <a-form-item field="name" label="表单名称">
          <a-input v-model="modal.name" :max-length="16" placeholder="请输入表单名称" />
        </a-form-item>
        <a-form-item field="key" label="表单编码">
          <a-input v-model="modal.key" placeholder="请输入表单编码" />
        </a-form-item>
        <!-- <a-form-item field="type" label="表单类型">
          <a-select placeholder="请选择" v-model="modal.type">
            <a-option :value="1">自行开发</a-option>
            <a-option :value="2">在线设计</a-option>
          </a-select>
        </a-form-item> -->
        <a-form-item field="groupId" label="分组">
          <a-select placeholder="请选择" v-model="modal.groupId" @change="groupChange" :loading="loading">
            <a-option v-for="group in groups" :key="group.id" :value="group.id">{{ group.name }}</a-option>
          </a-select>
        </a-form-item>
        <a-form-item field="remark" label="备注">
          <a-textarea v-model="modal.remark" placeholder="请填写备注" :auto-size="{
            minRows: 2,
            maxRows: 5,
          }" />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, toRaw, onBeforeMount } from "vue";
import { Notification } from "@arco-design/web-vue";
import FlowManApi from "@/api/FlowManApi";

let emits = defineEmits(["ok"]);
const props = defineProps({
  modal: { type: Object, default: () => { } },
});

let showModal = ref(false);
let loading = ref(false);
const modalFormRef = ref();
const rules = ref({
  name: { required: true, message: "表单名称不能为空" },
  key: { required: true, message: "表单编码不能为空" },
  groupId: { required: true, message: "请选择表单分组" },
});
const onSaveModal = () => {
  console.log("onSaveModal", props.modal);
  modalFormRef.value.validate((err) => {
    if (err) return;
    FlowManApi.InsertOrUpdateForms(toRaw(props.modal)).then((resp) => {
      if (resp.code == 0) {
        Notification.success(`${props.modal.id ? "修改成功" : "新建成功"}`);
        emits("ok", resp.data);
      }
    });
    close();
  });
};
const show = () => {
  showModal.value = true;
  getGroupList();
};
const close = () => {
  modalFormRef.value.resetFields();
  showModal.value = false;
};
// 分组相关
const groups = ref([]);
const getGroupList = () => {
  loading.value = true
  FlowManApi.listGroups({}).then((resp) => {
    loading.value = false
    if (resp.code == 0) {
      groups.value = resp.data.records || [];
      const list = groups.value?.filter((group) => {
        return group.id == props.modal.groupId
      })
      if (!list || list.length == 0) {
        props.modal.groupId = ''
      }
    }
  });
};
const groupChange = (key) => {
  console.log("groupChange", key);
  const filterArr = groups.value.filter((group) => {
    return group.id == key;
  });
  props.modal.groupName = filterArr[0].name;
};
onBeforeMount(() => {

});
defineExpose({ show, close });
</script>
